#| echo: false
#| warning: false
#| message: false
library(tidyverse)
library(reactable)
library(htmltools)
# 1. DATOS TRANSCRITOS (Imagen: Curso de vida Afroperuana)
data_curso_afro <- tribble(
~Categoria, ~Edad, ~`2019`, ~`2020`, ~`2021`,
# Severa
"Desnutrición proteicocalórica severa, no especificada", "01-11m", 0, 1, 0,
"Desnutrición proteicocalórica severa, no especificada", "01-05a", 1, 1, 2,
"Desnutrición proteicocalórica severa, no especificada", "06-11a", 1, 0, 0,
"Desnutrición proteicocalórica severa, no especificada", "60a >", 1, 0, 1,
# Moderada y Leve
"Desnutrición proteicocalórica de grado moderado y leve", "01-11m", 2, 12, 3,
"Desnutrición proteicocalórica de grado moderado y leve", "01-05a", 5, 7, 36,
"Desnutrición proteicocalórica de grado moderado y leve", "06-11a", 3, 0, 0,
"Desnutrición proteicocalórica de grado moderado y leve", "12-17a", 0, 0, 3,
"Desnutrición proteicocalórica de grado moderado y leve", "60a >", 2, 0, 1,
# Retardo del desarrollo
"Retardo del desarrollo debido a desnutrición proteicocalórica", "01-11m", 5, 16, 6,
"Retardo del desarrollo debido a desnutrición proteicocalórica", "01-05a", 31, 29, 60,
"Retardo del desarrollo debido a desnutrición proteicocalórica", "06-11a", 2, 0, 0,
"Retardo del desarrollo debido a desnutrición proteicocalórica", "12-17a", 12, 3, 3,
# No especificada
"Desnutrición proteicocalórica, no especificada", "01-05a", 0, 1, 0,
"Desnutrición proteicocalórica, no especificada", "06-11a", 0, 1, 0,
"Desnutrición proteicocalórica, no especificada", "18-29a", 0, 1, 0,
"Desnutrición proteicocalórica, no especificada", "30-59a", 1, 1, 0,
"Desnutrición proteicocalórica, no especificada", "60a >", 5, 1, 2,
# Total
"Total Desnutrición", "01-11m", 0, 29, 9,
"Total Desnutrición", "01-05a", 7, 38, 98,
"Total Desnutrición", "06-11a", 37, 1, 0,
"Total Desnutrición", "12-17a", 6, 3, 6,
"Total Desnutrición", "18-29a", 12, 1, 0,
"Total Desnutrición", "30-59a", 1, 1, 0,
"Total Desnutrición", "60a >", 8, 1, 4
)
# 2. COLORES ESPECÍFICOS DE ESTA IMAGEN
c_2019_afro <- "#ffeb3b" # Amarillo brillante
c_2020_afro <- "#ffb74d" # Naranja
c_2021_afro <- "#61dcb6" # Verde Turquesa
# 3. FUNCIÓN DE BARRAS
bar_chart <- function(label, width_percent, color) {
# Si el valor es 0, mostramos el número pero sin barra o barra mínima
width_style <- if(label == 0) "0px" else width_percent
bar <- div(
style = list(
background = color,
width = width_style,
height = "14px",
display = "inline-block",
marginRight = "8px"
)
)
div(
style = list(display = "flex", alignItems = "center"),
bar,
span(style = list(fontSize = "13px", color = "#333"), label)
)
}
# 4. TABLA REACTABLE
reactable(
data_curso_afro,
groupBy = "Categoria",
pagination = FALSE,
defaultExpanded = TRUE,
theme = reactableTheme(
headerStyle = list(
borderBottom = "2px solid #333",
textTransform = "uppercase",
fontSize = "12px",
color = "#555",
textAlign = "left"
),
rowStyle = list(
borderBottom = "1px solid #eee",
fontSize = "13px"
),
groupHeaderStyle = list(
backgroundColor = "#f9f9f9",
fontWeight = "bold",
fontSize = "14px"
)
),
columns = list(
Categoria = colDef(minWidth = 200),
Edad = colDef(
minWidth = 80,
align = "right",
style = list(fontWeight = "bold", color = "#555", borderRight = "1px solid #eee")
),
`2019` = colDef(
name = "2019",
align = "left",
cell = function(value) {
max_val <- max(data_curso_afro$`2019`, na.rm = TRUE)
width <- paste0((value / max_val) * 100, "%")
bar_chart(value, width, c_2019_afro)
},
minWidth = 150
),
`2020` = colDef(
name = "2020",
align = "left",
cell = function(value) {
max_val <- max(data_curso_afro$`2020`, na.rm = TRUE)
width <- paste0((value / max_val) * 100, "%")
bar_chart(value, width, c_2020_afro)
},
minWidth = 150
),
`2021` = colDef(
name = "2021",
align = "left",
cell = function(value) {
max_val <- max(data_curso_afro$`2021`, na.rm = TRUE)
width <- paste0((value / max_val) * 100, "%")
bar_chart(value, width, c_2021_afro)
},
minWidth = 150
)
)
) %>%
htmlwidgets::prependContent(
div(
h3("Desnutrición por curso de vida en población afroperuana 2019-2021",
style = "font-family: Arial; font-weight: bold; margin-bottom: 5px;"),
div(
style = "margin-bottom: 15px; font-family: Arial; font-size: 12px;",
span(style = paste0("background: ", c_2019_afro, "; width: 10px; height: 10px; display: inline-block; margin-right: 5px;")), "2019",
span(style = paste0("margin-left: 10px; background: ", c_2020_afro, "; width: 10px; height: 10px; display: inline-block; margin-right: 5px;")), "2020",
span(style = paste0("margin-left: 10px; background: ", c_2021_afro, "; width: 10px; height: 10px; display: inline-block; margin-right: 5px;")), "2021"
)
)
)